<template>
  <div class="big-bg">
    <div class="big-screen" ref="appRef">
      <div class="__top">
        <pageTitle></pageTitle>
      </div>
      <keep-alive>
            <router-view v-if="!$route.meta.noCache" :key="$route.path"></router-view>
      </keep-alive>
      <router-view v-if="$route.meta.noCache" :key="$route.path"></router-view>
      <!--路由菜单-->
      <hamburger :is-active="sidebar.opened" class="hamburger-container" :style="{'--left': left, opacity: !drawerVisible ? 1: 0}" @toggleClick="toggleSideBar"/>
      <el-drawer
        class="__drawer"
        :visible.sync="drawerVisible"
        size="300px"
        direction="ltr"
        :modal="false"
        :wrapperClosable="true"
        :close-on-press-escape="false"
        :with-header="false"
        @close="onClose">
        <div class="__drawerBody">
          <div class="menuList">
            <div class="item" v-for="item in routeData" :key="item.path" @click="goToRoute(item)">
              <img :src="item.meta.img" v-if="item.meta.img">
              <div class="label">{{item.meta.title}}</div>
            </div>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Hamburger from '@/components/Hamburger'
  import drawMixin from '@/utils/drawMixin'
  import pageTitle from './components/pageTitle'
  import util from '@/utils/util'

  let mixin = new drawMixin()
  export default {
    name: "Index",
    components: { pageTitle, Hamburger },
    mixins: [mixin],
    data() {
      return {
        drawerVisible: false,
        left: 0,
        routeData: [],
        loading: true,
        env: process.env.NODE_ENV
      }
    },
    watch: {
      '$route': {
        handler(to, from) {
          // 当路由发生变化时，执行的逻辑
          this.$nextTick(()=>{
            this.drawerVisible = false
          })
        },
        // 设置为深度监听
        deep: true
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
    },
    mounted() {
      const { routes } = this.$router.options
      const { children } = util.find(routes, e=>e.name === 'bigScreen')
      let resList = []
      if(this.env === 'production'){
        resList = children.filter(item => !item.meta.isDev)
      } else {
        resList = children
      }
      this.routeData = resList
      if(this.sidebar.opened){
        this.toggleSideBar()
      }
    },
    methods: {
      toggleSideBar() {
        this.$store.dispatch('app/toggleSideBar')
        this.drawerVisible = this.sidebar.opened
        // this.left = this.sidebar.opened ? '298px' : 0
      },
      goToRoute(route){
        if(route.name !== this.$route.name){
          this.$router.push({ path: route.path })
          this.toggleSideBar()
        }
      },
      onClose(){
        this.toggleSideBar()
      },
      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            // location.href = './index'
            console.log('成功退出')
            window.location.reload()
          })
        }).catch(() => {
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .big-screen {
    background-image: url('~@/assets/img/bg.png');
    display: grid;
    grid-template-rows: 80px auto;
    .__top { position: relative; z-index: 66; }
  }
  .hamburger-container {
    position: fixed; left: var(--left); bottom: 0; z-index: 99999;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background-color: rgba(1,31,70,1); border: 1px solid rgba(59, 157, 247, .8);  border-left: 0;
    cursor: pointer; padding: 0!important;
    transition: all .3s;
    -webkit-tap-highlight-color: transparent;
    ::v-deep .hamburger {
      fill: #fff;
    }
    &:hover {
      background: #1E5892;
    }
  }
  .__drawer {
    ::v-deep .el-drawer {
      background: rgba(1,31,70,0.9)!important;
      border: 1px solid rgba(59, 157, 247, .8);
      .el-drawer__body { padding: 15px 5px 15px 15px;}
    }
    .__drawerBody {
      width: 100%; height: 100%; padding-right: 10px; overflow-x: hidden; overflow-y: auto;
      &::-webkit-scrollbar { // 滚动条整体部分
        width: 5px;
        height: 0; // 纵向滚动条 必写
        background: transparent;
      }
      &::-webkit-scrollbar-thumb { // 内嵌滑块
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
        background: #0A4577;
      }
      &::-webkit-scrollbar-track { // 外层轨道
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: transparent;
      }
    }
    .menuList {
      .item {
        position: relative; cursor: pointer; min-height: 80px;
        img { width: 100%; object-fit: cover; }
        .label {
          text-align: center; line-height: 1.2; color: rgba(255,255,255,.7);
          padding: 10px 0; position: absolute; width: 100%; bottom: 0; background-color: rgba(0,0,0,.5);
        }
        & + .item { margin-top: 10px; /*border-top: 1px dotted rgba(0, 255, 250, 0.72); padding-top: 10px;*/}
      }
    }
  }
</style>

